"use client"

import { useRef } from "react"
import { Cosmograph, CosmographProvider, CosmographSearch, CosmographTimeline } from "@cosmograph/react"

interface CustomNode {
  id: string
  color?: string
  size?: number
  value?: number
  label?: string
  timestamp?: number
  [key: string]: any
}

interface CustomLink {
  source: string
  target: string
  color?: string
  value?: number
  timestamp?: number
  [key: string]: any
}

interface GraphProps {
  nodes: CustomNode[]
  links: CustomLink[]
  onSearch?: (term: string) => void
}

export default function GraphComponent({ nodes, links, onSearch }: GraphProps) {
  const cosmographRef = useRef<any>(null)

  // 计算节点大小的辅助函数
  const calculateNodeSize = (node: CustomNode) => {
    if (!node.value) return 0.5
    // 使用对数函数来处理大的数值，避免节点过大
    return Math.log(node.value) * 0.2 + 0.5
  }

  // 格式化日期的辅助函数
  const formatDate = (date: number | Date) => {
    const dateObj = date instanceof Date ? date : new Date(date)
    return dateObj.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    })
  }

  return (
    <div className="w-full h-full relative">
      <CosmographProvider nodes={nodes} links={links}>
        <Cosmograph
          ref={cosmographRef}
          backgroundColor="#000000"
          nodeColor={(node) => (node as CustomNode).color || "#ffffff"}
          nodeSize={calculateNodeSize}
          linkColor={(link) => (link as CustomLink).color || "#aaaaaa"}
          linkWidth={(link) => Math.log((link as CustomLink).value || 1) * 0.1 + 0.5}
          showHoveredNodeLabel={true}
          nodeLabelAccessor={(node) => (node as CustomNode).label || (node as CustomNode).id}
        />
        <div className="absolute left-4 top-4 z-50 w-64">
          <div className="bg-black/50 backdrop-blur-sm rounded-lg p-2">
            <CosmographSearch 
              placeholder="搜索节点..."
              accessors={[
                { label: '标签', accessor: (node) => (node as CustomNode).label || '' },
                { label: 'ID', accessor: (node) => (node as CustomNode).id || '' }
              ]}
              onSelectResult={(node?: CustomNode) => {
                if (node?.id) {
                  cosmographRef.current?.zoomToNode(node.id, { duration: 1000 });
                  onSearch?.(node.id);
                }
              }}
            />
          </div>
        </div>
        <div className="absolute bottom-4 left-4 right-4 z-50">
          <div className="bg-black/50 backdrop-blur-sm rounded-lg p-2">
            <CosmographTimeline
              accessor={(d) => (d as CustomNode | CustomLink).timestamp || 0}
              filterType="links"
              showAnimationControls={true}
              animationSpeed={50}
              barCount={100}
              barRadius={1}
              barPadding={0.1}
              axisTickHeight={15}
              formatter={formatDate}
              style={{
                "--cosmograph-timeline-bar-color": "#7a7a7a",
                "--cosmograph-timeline-selection-color": "rgb(119, 119, 119)",
                "--cosmograph-timeline-selection-opacity": "0.5",
                "--cosmograph-timeline-text-color": "white",
                "--cosmograph-timeline-background": "#222222",
                height: "60px"
              } as React.CSSProperties}
            />
          </div>
        </div>
      </CosmographProvider>
    </div>
  )
} 